<template>
  <el-drawer
    :append-to-body="true"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    :model-value="visible"
    :size="size || 500"
    :title="title"
    class="custom-drawer"
    @close="onReset('close')"
    @open="handleOpen"
  >
    <slot></slot>
    <template #footer>
      <slot name="footer">
        <div>
          <el-button @click="onReset('reset')">重置</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </div>
      </slot>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
defineProps<{ visible: boolean; title: string; size?: number | string }>()
const emits = defineEmits(['on-close', 'on-open', 'on-reset', 'on-submit'])

const handleOpen = () => {
  emits('on-open')
}
const beforeClose = (done: () => void) => {
  emits('on-close')
  done()
}
const onSubmit = () => {
  emits('on-submit')
}
const onReset = (type: string) => {
  emits('on-reset', type)
}
</script>

<style lang="less">
.custom-drawer {
  .el-drawer__header {
    margin: 0;
    padding: 15px 20px;
    border-bottom: 1px solid #e8e8e8;
    color: #515a6e;
    font-weight: bold;
  }
  .el-drawer__footer {
    border-top: 1px solid #e8e8e8;
    padding-bottom: 10px;
  }
}
</style>
